<template>
  <!-- 账号安全 -->
  <div class="content">
    <div class="header">
      <h3 class="blue-bg">账号安全</h3>
    </div>
    <div class="body">
      <el-card>
        <div class="card-item">
          <div class="card-item-ul">
            <span class="spans"></span>
            <div class="card-item-ul-li">
              <p>安全手机<span>180******66</span></p>
              <p>安全手机可以用于登录账号，重置密码或其他安全验证</p>
            </div>
          </div>
          <el-button type="primary">修改</el-button>
        </div>

        <div class="card-item">
          <div class="card-item-ul">
            <span class="spans"></span>
            <div class="card-item-ul-li">
              <p>安全邮箱<span class="spanColor">未绑定</span></p>
              <p>绑定邮箱可以用于登录账号，重置密码或其他安全验证</p>
            </div>
          </div>
          <el-button type="primary">设置</el-button>
        </div>

        <div class="card-item">
          <div class="card-item-ul">
            <span class="spans"></span>
            <div class="card-item-ul-li">
              <p>绑定QQ<span class="spanColor">5669995085</span></p>
              <p>绑定QQ账号，使用QQ账号便捷登录</p>
            </div>
          </div>
          <el-button type="primary">解绑</el-button>
        </div>

        <div class="card-item">
          <div class="card-item-ul">
            <span class="spans"></span>
            <div class="card-item-ul-li">
              <p>绑定微信<span class="spanColor">未绑定</span></p>
              <p>绑定微信账号，使用微信账号便捷登录</p>
            </div>
          </div>
          <el-button type="primary">绑定</el-button>
        </div>

        <div class="card-item">
          <div class="card-item-ul">
            <span class="spans"></span>
            <div class="card-item-ul-li">
              <p>绑定支付宝<span class="spanColor">未绑定</span></p>
              <p>绑定支付宝账号，使用支付宝账号便捷登录</p>
            </div>
          </div>
          <el-button type="primary">绑定</el-button>
        </div>
      </el-card>
    </div>
    <el-card>
      <p>温馨提醒</p>
      <P>• 绑定第三方社交账号后可以直接使用社交账号进行登录</P>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "accountSecurity",
  data() {
    return {
      
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 16px;
  .header {
    h3 {
      font-weight: bold;
    }
  }
  .blue-bg::before {
    content: " ";
    width: 8px;
    height: 20px;
    background: #0782eb;
    display: inline-block;
    vertical-align: bottom;
    margin: 0px 5px;
  }
  .body {
    margin: 10px 5px;
    .card-item {
      padding: 20px 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      &-ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .spans {
          width: 60px;
          height: 60px;
          background: #ccc;
          border-radius: 50%;
          margin-right: 20px;
        }
        &-li {
          line-height: 30px;
          p {
            span{
              margin-left: 10px;
            }
            .spanColor {
              color: #F59A23
            }
          }
        }
      }
    }
  }
}
</style>
